iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
佛心分享-IT 人自學之術

一個網頁的誕生!教你從基礎到自行完成設計網站系列 第 5

DAY5 QWeb是什麼?網頁與伺服器的應用程式—使用 PyQt5 實作簡易桌面 Web 瀏覽器

  • 分享至 

  • xImage
  •  

Web 客戶端(Web Client)是指透過網頁瀏覽器與伺服器進行互動的應用程式。它是一個運行在使用者端的軟體,通過 HTTP/HTTPS 協定與遠端的 Web 伺服器溝通,接收並呈現來自伺服器的資料,通常以 HTML、CSS 和 JavaScript 為基礎來顯示內容。Web 客戶端的功能包括:

  • 瀏覽網頁:透過瀏覽器發送請求給伺服器,接收並顯示網頁內容。
  • 資料提交:使用者可以通過表單或其他方式提交資料,伺服器則根據這些資料作出回應或儲存。
  • 動態互動:客戶端利用 JavaScript 等技術,提供使用者動態的互動體驗(如按鈕點擊、表單驗證等)。

QWeb 是 Qt 框架中的一個模組,專門用來處理 Web 技術相關的功能。它主要利用 QWebEngine 來內嵌網頁瀏覽器功能,允許開發者在 Qt 應用程式內嵌網頁瀏覽功能。QWeb 的功能包括:

  • 嵌入 Web 頁面:使用 QWeb 可以在 Qt 應用程式中顯示 HTML 頁面,類似於在應用程式內內嵌一個網頁瀏覽器。
  • 與 JavaScript 交互:QWeb 支援與網頁中的 JavaScript 互動,允許應用程式與網頁上的腳本交換資料。
  • 多平台支持:QWeb 作為 Qt 的一部分,支援跨平台開發,可以在不同作業系統上運行。

QWeb 主要應用於需要將 Web 技術與桌面應用程式相結合的場景,比如顯示在線內容或與 Web 服務整合的桌面應用程式。

要實作一個簡單的 QWeb 瀏覽器,我們可以使用 QWebEngineView,這是 Qt5 的一部分。以下是如何在 PyQt5 中使用 QWebEngineView 來實作一個基本的 Web 瀏覽器的範例:

安裝所需套件

首先,確保已經安裝 PyQt5 和 PyQtWebEngine 模組。可以使用 pip 安裝:

pip install PyQt5 PyQtWebEngine

Python 代碼範例

import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import QWebEngineView

class Browser(QMainWindow):
    def __init__(self):
        super().__init__()

        # 設定主視窗
        self.setWindowTitle("QWeb 瀏覽器")
        self.setGeometry(100, 100, 1200, 800)

        # 建立 QWebEngineView 物件
        self.browser = QWebEngineView()

        # 預設載入的網頁
        self.browser.setUrl(QUrl("https://www.google.com"))

        # 設定為中心小工具
        self.setCentralWidget(self.browser)

        # 建立工具列
        nav_bar = QToolBar()
        self.addToolBar(nav_bar)

        # 增加網址輸入框
        self.url_bar = QLineEdit()
        nav_bar.addWidget(self.url_bar)

        # 當輸入網址後按下 Enter,載入該網址
        self.url_bar.returnPressed.connect(self.navigate_to_url)

        # 當網頁載入時,更新網址欄
        self.browser.urlChanged.connect(self.update_url)

    def navigate_to_url(self):
        url = self.url_bar.text()
        self.browser.setUrl(QUrl(url))

    def update_url(self, q):
        self.url_bar.setText(q.toString())

if __name__ == "__main__":
    app = QApplication(sys.argv)
    browser = Browser()
    browser.show()
    sys.exit(app.exec_())

程式說明

  1. QWebEngineView:這個元件用來顯示網頁內容。
  2. 導航欄:使用 QLineEdit 作為網址欄,讓使用者輸入 URL,然後通過 returnPressed 事件來載入指定的網頁。
  3. 網址變更更新:當瀏覽器載入一個新的網頁時,會自動更新網址欄的內容。

執行

  • 執行這段程式後,會開啟一個簡單的 QWeb 瀏覽器,初始網頁為 Google。
  • 在網址欄中輸入其他網址來進行瀏覽。

使用 PyQt5 中的 QWebEngineView 實作一個基礎 Web 瀏覽器的範例適用於桌面應用程式。


上一篇
DAY4如何上鎖🔒
下一篇
DAY6如何將網路加密!使網頁更加安全(HTTP到HTTPS的轉換)
系列文
一個網頁的誕生!教你從基礎到自行完成設計網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言